<template>
  <div id="order">
    <div class="order-header">
      <div class="order-title">
        <i class="el-icon-s-order" style="color: #ff6700;"></i>
        我的订单
      </div>
    </div>
    <div id="content" v-show="getCheckGoods.length > 0">
      <el-card v-for="(item,index) in this.$store.state.orderData" :key="index">
        <div id="box">
          <p>订单编号:{{data.order_id}}</p>
          <p>订单时间:{{data.order_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
        <el-table style="width: 100%" :data="item">
          <el-table-column prop="productImg" width="180">
            <template v-slot="scope">
              <img :src="'http://39.100.7.70:81/'+scope.row.productImg" alt />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="380"></el-table-column>
          <el-table-column prop="price" label="单价" width="160"></el-table-column>
          <el-table-column prop="num" label="数量" width="190"></el-table-column>
          <el-table-column label="小计" width="160">
            <template v-slot="scope">{{scope.row.price*scope.row.num}}</template>
          </el-table-column>
        </el-table>
        <div id="boxx">
          <p>
            共
            <span>{{getCheckNum}}</span>件商品
          </p>
          <p>
            合计
            <span>{{ item[0].price*item[0].num}}</span>元
          </p>
        </div>
      </el-card>
    </div>
    <!-- 收藏列表为空的时候显示的内容 -->
    <div v-show="getCheckGoods.length == 0" class="collect-empty">
      <div class="empty">
        <h2>您的订单还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/confirmOrder.js";
import { Notification } from "element-ui";
import { mapGetters } from "vuex";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      data: {
        order_id: 30641618817555504,
        order_time: 1618817555506
      },

      orderData: []
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["getCheckGoods", "getTotalPrice", "getCheckNum"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getOrder() {
      let { data: res } = await Api.getOrders({
        user_id: this.$store.state.user_id
      });
      console.log(res);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrder();
    console.log(this.getCheckGoods);
    this.$store.state.orderData.push(this.getCheckGoods);
    var num = 0;
    this.getCheckGoods.forEach(item => {
      num += item.num;
    });
    console.log(num);
    console.log(this.$store.state.orderData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
#order {
  background-color: #f5f5f5;
  .order-header {
    height: 64px;
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
    .order-title {
      width: 1225px;
      padding: 0 200px;
      height: 64px;
      line-height: 58px;
      font-size: 28px;
    }
  }
  #content {
    width: 100%;
    height: 100%;
    padding: 20px 200px;
    background-color: #f5f5f5;
    .el-card {
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
      #box {
        width: 100%;
        height: 76px;
        border-bottom: 1px solid #ff6700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 16px;
          &:nth-of-type(1) {
            color: #ff6700;
          }
        }
      }
      #boxx {
        width: 100%;
        height: 76px;
        border-bottom: 1px solid #ff6700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          span {
            color: red;
          }
          &:nth-of-type(2) {
            color: red;
            span {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}
img {
  width: 64px;
  height: 82px;
}
.collect-empty {
  width: 100%;
  // padding:0 70px;
  background: #f5f5f5;
  .empty {
    height: 300px;
    padding: 0 0 130px 558px;
    margin: 65px 0 0;
    background: url(../../../src/assets/imgs/cart-empty.png) no-repeat 124px 0;
    color: #b0b0b0;
    overflow: hidden;

    h2 {
      margin: 70px 0 15px;
      font-size: 36px;
    }
    p {
      margin: 0 0 20px;
      font-size: 20px;
    }
  }
}
//提交qwert
</style>